<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <title>{$tdk['title']}</title>
    <meta name="description" content="{$tdk['description']}">
    <meta name="keywords" content="{$tdk['keywords']}">
    <meta name="author" content="alonez"/>
    <meta name="baidu-site-verification" content="code-mjNnJHp6FK"/>
    <link rel="shortcut icon" href="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/favicon.ico">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/changehome/assets/js/layer-v3.1.1/layer.js"></script>
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
    <style>
        .rootContainer {
            text-align: center;
            background: url(https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/bg.png) no-repeat center center;
            background-size: cover;
            height: 100vh;
        }

        ::-moz-placeholder {
            color: #ccc;
        }

        ::-webkit-input-placeholder {
            color: #ccc;
        }

        :-ms-input-placeholder {
            color: #ccc;
        }

        ol, ul {
            list-style: none;
        }

        p {
            margin: 0;
        }

        .img-fit {
            display: block;
            max-width: 100%;
            height: auto;
        }

        .show {
            display: block;
        }

        .hide {
            display: none;
        }

        .color-container, .style-container, .type-container, .cost-container, .order-container {
            display: flex;
            width: 100%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .content {
            width: 100%;
            display: flex;
            margin-top: .2rem;
            flex-wrap: wrap;
        }

        .content > .item {
            width: calc(100% / 3);
            margin-top: .3rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .content > .item2 {
            width: calc(100% / 2);
            margin-top: .3rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .content > .item3 {
            width: calc(100% / 3);
            margin-top: .3rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .content > .item > img {
            width: 1.8rem;
        }

        .content > .item > .check-img {
            position: absolute;
            width: .4rem;
            height: .4rem;
            right: .35rem;
            top: 1.43rem;
        }

        .content > .item2 > .check-img {
            position: absolute;
            width: .4rem;
            height: .4rem;
            right: .95rem;
            top: 1.43rem;
        }

        .content > .item3 > .check-img {
            position: absolute;
            width: .4rem;
            height: .4rem;
            right: .35rem;
            top: 1.43rem;
        }

        .content > .item > p {
            color: #AE5C3F;
            font-size: .3rem;
            font-weight: bold;
            margin-top: .2rem;
        }

        .next {
            width: 2.6rem;
            height: .8rem;
            margin-top: .5rem;
            border: none;
            background: rgba(215, 66, 67, 1);
            border-radius: .35rem;
            font-size: .36rem;
            color: #ffffff;
        }

        .next:active {
            opacity: .7;
        }

        .header {
            padding-top: .7rem;
        }

        .header > .title {
            color: #BC9552;
            font-size: .44rem;
            font-weight: bold;
            line-height: 1.5;
        }

        .header > .sub-title {
            color: #BC9552;
            font-size: .24rem;
            font-weight: 400;
            margin-top: .3rem;
        }

        .step {
            margin-top: .6rem;
        }

        .step > .title {
            color: #AE5C3F;
            font-size: .36rem;
            font-weight: bold;
        }

        .step > .mut-choose {
            color: #AE5C3F;
            font-size: .24rem;
            font-weight: 400;
        }

        input {
            text-align: left;
            padding-left: .2rem;
        }

        input:focus, button:focus {
            outline: none;
        }

        .mask {
            display: none;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, .4);
            overflow: hidden;
            min-height: 100vh;
        }

        .order-wrap, .success-wrap {
            display: flex;width: 6.8rem;
            background: #FFFFFF; padding: .35rem;
            border-radius: 6px; justify-content: center;align-items: center; position: relative
        }

        .success-container {
            display: none;
        }

        .float-button {
            display: none;
        }

        .rootContainer {
            display: none;
        }

        .splashContainer {
            position: relative;
        }
    </style>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?40c4a0b79991b779265eef34e4be9d02";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <script>
        (function (r, d, s, l) {
            var meteor = r.meteor = r.meteor || [];
            meteor.methods = ["track", "off", "on"];
            meteor.factory = function (method) {
                return function () {
                    var args = Array.prototype.slice.call(arguments);
                    args.unshift(method);
                    meteor.push(args);
                    return meteor
                }
            };
            for (var i = 0; i < meteor.methods.length; i++) {
                var key = meteor.methods[i];
                meteor[key] = meteor.factory(key)
            }
            meteor.load = function () {
                var js, fjs = d.getElementsByTagName(s)[0];
                js = d.createElement(s);
                js.src = "https://analytics.snssdk.com/meteor.js/v1/" + l + "/sdk";
                fjs.parentNode.insertBefore(js, fjs)
            };
            meteor.load();
            if (meteor.invoked) {
                return
            }
            meteor.invoked = true;
            meteor.track("pageview")
        })(window, document, "script", "1684500982326343");
    </script>
</head>
<body>
<div class="splashContainer">
    <div>
        <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/index.jpg" alt=""/>
    </div>
    <div style="position: absolute; bottom: 1rem">
        <img id="enter" class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/button.gif" alt=""/>
    </div>
</div>
<div class="rootContainer">
    <div>
        <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/top.png" alt=""/>
    </div>

    <!-- 色彩 -->
    <div style="display: block" class="color-container">
        <div class="step">
            <p class="title">你喜欢的色彩？</p>
            <p class="mut-choose">（可多选）</p>
        </div>
        <div class="content">
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/color/1_1.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>旷野之秋</p>
            </div>
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/color/1_2.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>盛夏光年</p>
            </div>
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/color/1_3.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>海洋屿歌</p>
            </div>
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/color/1_4.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>温暖山丘</p>
            </div>
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/color/1_5.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>落叶低语</p>
            </div>
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/color/1_6.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>酷炫黑金</p>
            </div>
        </div>
        <button class="next">下一步</button>
    </div>

    <!-- 风格 -->
    <div style="display: none" class="style-container">
        <div class="step">
            <p class="title">你喜欢的装修风格？</p>
            <p class="mut-choose">（可多选）</p>
        </div>
        <div class="content">
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/style/2_1.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>轻奢风格</p>
            </div>
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/style/2_2.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>现代风格</p>
            </div>
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/style/2_3.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>北欧风格</p>
            </div>
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/style/2_4.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>新中式</p>
            </div>
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/style/2_5.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>美式</p>
            </div>
            <div class="item">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/style/2_6.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>其他</p>
            </div>
        </div>
        <button class="next">下一步</button>
    </div>

    <!-- 房屋类型 -->
    <div style="display: none" class="type-container">
        <div class="step">
            <p class="title">你想装修的房屋类型？</p>
            <p class="mut-choose" style="visibility: hidden">（单选）</p>
        </div>
        <div class="content">
            <div class="item item2">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/type/3_1.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>精装房-全屋定制</p>
            </div>
            <div class="item item2">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/type/3_2.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>精装房-全屋软装</p>
            </div>
            <div class="item item2">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/type/3_3.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>清水房-品质整装</p>
            </div>
            <div class="item item2">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/type/3_4.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>旧房/二手房-改造翻新</p>
            </div>
        </div>
        <button class="next">下一步</button>
    </div>

    <!-- 预算 -->
    <div style="display: none" class="cost-container">
        <div class="step">
            <p class="title">你的预算范围？</p>
            <p class="mut-choose" style="visibility: hidden">（单选）</p>
        </div>
        <div class="content">
            <div class="item item3">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/cost/4_1.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>5万元以下</p>
            </div>
            <div class="item item3">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/cost/4_2.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>5-8万元</p>
            </div>
            <div class="item item3">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/cost/4_3.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>8-12万元</p>
            </div>
            <div class="item item3">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/cost/4_4.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>12-15万元</p>
            </div>
            <div class="item item3">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/cost/4_5.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>15-20万元</p>
            </div>
            <div class="item item3">
                <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/cost/4_6.png"
                     alt=""/>
                <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/sel.png"
                     alt=""/>
                <img class="check-img unsel"
                     src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/unsel.png" alt=""/>
                <p>20万元以上</p>
            </div>
        </div>
        <button class="next">下一步</button>
    </div>

    <!-- 报名 -->
    <div style="display: none" class="order-container">
        <div class="step">
            <p class="title">算一算你家装修要多少钱？</p>
        </div>
        <div style="display: flex; flex-direction: column; padding: 0 .37rem; margin-top: .75rem">
            <img class="img-fit" style="width: 3.03rem" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/title1.png" alt=""/>
            <div style="display: flex; justify-content: space-between; margin-top: .4rem">
                <div style="width: 48%"><img class="img-fit" style="width: 3.3rem" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/tq1.png" alt=""/></div>
                <div style="width: 48%"><img class="img-fit" style="width: 3.3rem" src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/tq2.png" alt=""/></div>
            </div>
        </div>
        <div style="display: flex;
    flex-direction: column;
    align-items: center;">
            <input id="customer" type="text" placeholder="*请输入姓名" style="margin-top: .4rem; width: 6.6rem;height: .7rem; font-size: .32rem;border:1px solid #999999;
border-radius: .06rem;"/>
            <input id="mobile" type="number" placeholder="*请输入联系方式" style="margin-top: .4rem; width: 6.6rem;height: .7rem; font-size: .32rem;border:1px solid #999999;
border-radius: .06rem;"/>
            <input id="area" type="number" placeholder="*请输入房屋面积" style="margin-top: .4rem; width: 6.6rem;height: .7rem; font-size: .32rem;border:1px solid #999999;
border-radius: .06rem;"/>
        </div>
        <button class="next" style="width: 6.6rem;font-size: .35rem;border-radius: 6px">立即预约</button>
            <p style="margin-top: .1rem; color: #D74243; font-size: .22rem">*为了您的权益，您的信息将被严格保密</p>
    </div>

</div>

<div class="float-button">
    <img alt=""
         style="position: fixed; width: 1.3rem; right: .12rem; top: 4.3rem"
         src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/calc.gif">
</div>

<div class="mask">
    <div class="appointmentWrap">
        <div style="display: flex; width: 100vw; height: 100vh;justify-content: center;align-items: center">
            <div style="display: flex; flex-direction: column">
                <div>
                    <img alt="" id="close-appointment"
                         style="width: .55rem; float: right; margin-bottom: .2rem"
                         src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/close.png">
                </div>
            <div class="order-wrap"><div
                     style="background: #FEFEFE;border-radius: .06rem;display: flex; flex-direction: column; align-items: center">
                    <div style="font-size: .38rem; font-weight: bold; color: #666; margin-top: .1rem">输入面积 在线预约</div>
                    <div style="display: flex;
    flex-direction: column;
    align-items: center;">
                        <input id="dialog-customer" type="text" placeholder="*请输入姓名" style="margin-top: .3rem; width: 6.4rem;height: .7rem; font-size: .32rem;border:1px solid #999999;
border-radius: .06rem;"/>
                        <input id="dialog-mobile" type="number" placeholder="*请输入联系方式" style="margin-top: .4rem; width: 6.4rem;height: .7rem; font-size: .32rem;border:1px solid #999999;
border-radius: .06rem;"/>
                        <input id="dialog-area" type="number" placeholder="*请输入房屋面积" style="margin-top: .4rem; width: 6.4rem;height: .7rem; font-size: .32rem;border:1px solid #999999;
border-radius: .06rem;"/>
                    </div>
                    <button class="next" style="width: 6.4rem; border-radius: 6px">免费获取报价明细</button>
                    <div style="color: #333333; font-size: .24rem;margin-top: .25rem">
                        — 已有<span id="num"
                                  style="color: #D74243; font-size: .24rem; font-weight: bold; margin: 0 .1rem">{$num}</span>人成功获取报价
                        —
                    </div>
                </div>
            </div>
                <div class="success-container">
                <div class="success-wrap" style=" flex-direction: column">
                    <img alt=""
                         style="width: 2.35rem; margin-top: .4rem"
                         src="https://res.bestyoujia.com/web/ZMYJ/activities/landing202012/icon.png">
                    <div style="color: #AB504D; font-size: .28rem; font-weight: 500; text-align: center; line-height: 30px; margin-top: .5rem; margin-bottom: .2rem">
                        恭喜你，已预约成功<br>
                        顾问将会在24小时内联系你，<br>
                        请注意接听电话！
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- js START -->
<script src="https://res.bestyoujia.com/common/assets/js/appointment.js"></script>
<script src="https://res.bestyoujia.com/web/ZMYJ/assets/js/mobile-common.js"></script>
<script src="https://res.bestyoujia.com/web/UJGC/common/mobile/js/backTop.js"></script>
<script src="https://res.bestyoujia.com/web/UJGC/common/mobile/js/common.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://res.bestyoujia.com/common/assets/js/wxShare.js"></script>
<script type="text/javascript">
    initWxShare('算一算你家装修要多少钱？', '算一算你家装修要多少钱？');

    (function (n, e) {
        const t = n.documentElement, i = "orientationchange" in window ? "orientationchange" : "resize",
            d = function () {
                const n = t.clientWidth;
                n && (t.style.fontSize = n / 7.5 + "px")
            };
        n.addEventListener && (e.addEventListener(i, d, !1));
        n.addEventListener && n.addEventListener("DOMContentLoaded", d, !1);
    })(document, window);

    Array.prototype.remove = function (val) {
        const index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

    $('#enter').on('click', function () {
        $('.splashContainer').hide();
        $('.rootContainer').show();
        $('.float-button').show();
    });

    let canNext = false;

    const colorArr = [];
    $('.color-container > .content > .item').each(function (i, e) {
        let isChecked = false;
        $(e).on('click', function () {
            if (isChecked) {
                isChecked = false;
                onHide($(this));
                colorArr.remove($(this).find('p').text());
            } else {
                isChecked = true;
                onShow($(this));
                colorArr.push($(this).find('p').text());
            }
            console.log('color', colorArr);
        });
    });

    const styleArr = [];
    $('.style-container > .content > .item').each(function (i, e) {
        let isChecked = false;
        $(e).on('click', function () {
            if (isChecked) {
                isChecked = false;
                onHide($(this));
                styleArr.remove($(this).find('p').text());
            } else {
                isChecked = true;
                onShow($(this));
                styleArr.push($(this).find('p').text());
            }
            console.log('style', styleArr);
        });
    });

    const furnitureArr = [];
    $('.furniture-container > .content > .item').each(function (i, e) {
        let isChecked = false;
        $(e).on('click', function () {
            if (isChecked) {
                isChecked = false;
                onHide($(this));
                furnitureArr.remove($(this).find('p').text());
            } else {
                isChecked = true;
                onShow($(this));
                furnitureArr.push($(this).find('p').text());
            }
            console.log('furnitureArr', furnitureArr);
        });
    });

    function onShow(e) {
        console.log('onShow', e);
        e.find('.sel').removeClass('hide');
        e.find('.unsel').removeClass('show');
        e.find('.sel').addClass('show');
        e.find('.unsel').addClass('hide');
    }

    function onHide(e) {
        console.log('onHide', e);
        e.find('.sel').removeClass('show');
        e.find('.unsel').removeClass('show');
        e.find('.unsel').removeClass('hide');
        e.find('.sel').addClass('hide');
        e.find('.unsel').addClass('show');
    }

    let type = '';
    $('.type-container > .content > .item').each(function (i, e) {
        $(e).on('click', function () {
            $('.type-container > .content > .item').find('.sel').removeClass('show');
            $('.type-container > .content > .item').find('.sel').addClass('hide');
            $('.type-container > .content > .item').find('.unsel').addClass('show');
            $('.type-container > .content > .item').find('.unsel').removeClass('hide');
            onShow($(this));
            type = $(this).find('p').text();
            console.log('type', type);
        });
    });

    let cost = '';
    $('.cost-container > .content > .item').each(function (i, e) {
        $(e).on('click', function () {
            $('.cost-container > .content > .item').find('.sel').removeClass('show');
            $('.cost-container > .content > .item').find('.sel').addClass('hide');
            $('.cost-container > .content > .item').find('.unsel').addClass('show');
            $('.cost-container > .content > .item').find('.unsel').removeClass('hide');
            onShow($(this));
            cost = $(this).find('p').text();
            console.log('cost', cost);
        });
    });

    $('#close-appointment').on('click', function () {
        $('.mask').hide();
    });

    $('.float-button').on('click', function () {
        $('.mask').show();
        $('.order-wrap').css('display', 'flex');
        $('.success-container').hide();
    });

    $('.next').each(function (i, e) {
        $(e).on('click', function () {
            console.log('next', i);
            switch (i) {
                case 0:
                    if (colorArr.length === 0) {
                        showToast('请至少选择一项色彩', 1000);
                        return;
                    }
                    $('.color-container').hide();
                    $('.style-container').show();
                    break;
                case 1:
                    if (styleArr.length === 0) {
                        showToast('请至少选择一项风格', 1000);
                        return;
                    }
                    $('.style-container').hide();
                    $('.type-container').show();
                    break;
                case 2:
                    if (type === '') {
                        showToast('请选择房屋类型', 1000);
                        return;
                    }
                    $('.type-container').hide();
                    $('.cost-container').show();
                    break;
                case 3:
                    if (cost === '') {
                        showToast('请选择预算范围', 1000);
                        return;
                    }
                    $('.cost-container').hide();
                    $('.order-container').show();
                    break;
                case 4:
                    window.page_position = '头条信息流投放-立即预约';
                    if ($('#customer').val() === '') {
                        showWarnTips('请输入姓名', '#customer');
                        return;
                    }
                    if ($('#mobile').val() === '') {
                        showWarnTips('请输入联系方式', '#mobile');
                        return;
                    }
                    if ($('#area').val() === '') {
                        showWarnTips('请输入房屋面积', '#area');
                        return;
                    }
                    console.log('手机号', mobile);
                    const mobile_result = validMobile($('#mobile').val());
                    if (mobile_result === 0) {
                        showWarnTips('手机号格式不正确', '#mobile');
                        return;
                    }

                    let message = '';

                    message += `喜欢色彩:${colorArr.join('|')};装修风格:${styleArr.join('|')};预算范围:${cost}`;

                    const data = {
                        customer: $('#customer').val(),
                        mobile: $('#mobile').val(),
                        area: $('#area').val(),
                        house_type: type,
                        remark: message
                    };
                    doAppointment(data,
                        function (res) {
                            console.log('onAppointmentSuccess', res);
                            const {data = ''} = res;
                            if (data) {
                                buryingPoint('APPOINTMENT', data);
                                $('.mask').show();
                                $('.order-wrap').hide();
                                $('.success-container').show();
                                meteor.track('form', {convert_id: 1684506479912968 });
                                $.get("{$Request.root}/api/updateCountByCode?code=landing202012&count="+$('#num').text(), function (result) {
                                    $('#num').text(result);
                                });
                                resetForm();
                            }
                        }, function (err) {
                            console.log('onAppointmentError', err);
                            showToast('预约失败');
                        });
                    break;
                case 5:
                    window.page_position = '头条信息流投放-浮窗报名';
                    if ($('#dialog-customer').val() === '') {
                        showWarnTips('请输入姓名', '#dialog-customer');
                        return;
                    }
                    if ($('#dialog-mobile').val() === '') {
                        showWarnTips('请输入联系方式', '#dialog-mobile');
                        return;
                    }
                    console.log('手机号', mobile);
                    const mobile_result2 = validMobile($('#dialog-mobile').val());
                    if (mobile_result2 === 0) {
                        showWarnTips('手机号格式不正确', '#dialog-mobile');
                        return;
                    }
                    if ($('#dialog-area').val() === '') {
                        showWarnTips('请输入房屋面积', '#dialog-area');
                        return;
                    }

                    let message2 = '';

                    message2 += `喜欢色彩:${colorArr.join('|')};装修风格:${styleArr.join('|')};预算范围:${cost}`;

                    const data2 = {
                        customer: $('#dialog-customer').val(),
                        mobile: $('#dialog-mobile').val(),
                        area: $('#dialog-area').val(),
                        house_type: type,
                        remark: message2
                    };
                    doAppointment(data2,
                        function (res) {
                            console.log('onAppointmentSuccess', res);
                            const {data = ''} = res;
                            if (data) {
                                buryingPoint('APPOINTMENT', data);
                                $('.order-wrap').hide();
                                $('.success-container').show();
                                meteor.track('form', {convert_id: 1684506479912968 });
                                $.get("{$Request.root}/api/updateCountByCode?code=landing202012&count="+$('#num').text(), function (result) {
                                    $('#num').text(result);
                                });
                                resetForm();
                            }
                        }, function (err) {
                            console.log('onAppointmentError', err);
                            showToast('预约失败');
                        });
                    break;
                default:
                    break;
            }
        });
    });

    function resetForm() {
        $('#customer').val('');
        $('#mobile').val('');
        $('#area').val('');
        $('#dialog-customer').val('');
        $('#dialog-mobile').val('');
        $('#dialog-area').val('');
    }

    /**
     *  1:正确，0:格式错误，2:未输入
     */
    function validMobile(number) {
        const isMob = /^1\d{10}$/;
        if (number === '') {
            return 2;
        }
        return isMob.test(number) ? 1 : 0;
    }

    function showWarnTips(msg, dom) {
        layer.tips(msg, dom, {
            tips: [1, '#fa8c16'],
            time: 2000
        });
    }
</script>
<!-- js END -->
</body>
</html>
